@media only screen and (min-device-width : 320px) and (max-device-width : 400px) {

.left{display: none;}
.top{height: 4vh;overflow: hidden;}

.media{clear: both;transform: translateX(10vw) scale(1.82,1) ;overflow-x: hidden;}
.media p,.media a,.media h2,.media svg,.media li,.media img{transform: scale(1,1.82);}
.uiquan1{transform: translateY(200px);margin-bottom: 0;}
.uiquan2{margin-top: 0;margin-bottom: 0;transform: translateY(-300px);}
.uiquan{transform: translateY(-800px);}
.uiquan1 ul{transform: translate(30px,10px) scale(1.3,1.3);}
.uiquan2 ul{transform: translate(-35px,150px) scale(1.3,1.3);}
.uiquan svg{transform: scale(1.3,1.1);}
.uiquan a,.uiquan li{font-size: 20px;clear: left;transform: scale(1,1.82) ;margin-bottom:50px;width: 100%;}
.uiquan li{margin-left: 50px;}
#fm{transform: translateX(-80px) scale(1,1.82);}
#gitee{transform: translateX(0px) scale(1,1.82);}
#tree{width:100vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;transform: translateX(-12.5vw);}
}
@media only screen and (min-device-width : 960px) {#tree{width:55vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;}}
@font-face{
	font-family: 'ops';
	src:url('./OPS.ttf');
}
*{margin: 0;padding: 0;font-family: "ops";transition: background-color 0.4s linear 0s,width 0.4s linear 0s,color 0.4s linear 0s,background 0.4s linear 0s,opacity 3s ease-in 0s;}

body{
	overflow: hidden;
	background-color: #262626;
	background-image: url(../img/grba.png);
	background-size: 100vw 92vh;
	background-position:bottom;
}
.top{
	width: 100vw;
	height: 8vh;
	background-color: #262626;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
}
.top>a{
	float: left;
	margin: 0px 1.25rem;
	font-family: 'ops';
	height: 4.6875rem;
	line-height: 4.6875rem;
	color: #f2f2f2;
	font-size: 1.375rem;
	text-decoration: none;
}
#tfirst{
	margin: 0.625rem 0.625rem 0 0.625rem ;
}
#tsecond{
	float: right;
}
#tthird{
	float: right;
	margin: 0px 1.25rem 0px 5rem;
}
.content{
	position: absolute;
	transform: translateX(12.5vw);
	height: 92vh;
	width: 65vw;
}
.content:after {
            content: "";
            clear: left;
            display: block;
        }
.media{
	overflow-y: scroll;
	height: 92vh;
	float: left;
	margin: 0 auto;
	width: 55vw;
	background-color: #262626;
	background-image: linear-gradient(180deg, #4d0500 40%, #30c9cd 100%);
	background-size: 150% 150%;
	background-position: center;
}
.media::-webkit-scrollbar {
    display: none;
}
.media1{
	overflow: hidden;
	position: relative;
	height: 92vh;
	width: 55vw;
	margin: 0 auto;
	background-color: white;
}
#tree{height: auto;position: absolute;margin: 0 auto;z-index: 99;}
#t1{position: absolute;width:85%;height: auto;left: 15%;top: -20%;}
#t2{position: absolute;width:100%;height: auto;}
.uiquan1{
	display: flex;
	position: relative;
	margin: 0 1.5vw 0 1.5vw;
	width: 52vw;
	height: 45vh;
	border-radius: 10px;
}
.uiquan2{
	display: flex;
	position: relative;
	margin: 10vh 1.5vw 7vh 1.5vw;
	width: 52vw;
	height: 45vh;
	border-radius: 10px;
}
.left{
	position: relative;
	transform: translateY(2.5vh);
	float: left;
	width: 10vw;
}
.left #l{
	overflow: hidden;
	height: 5vh;
	width: 10vw;
	border-radius:0.125rem 0 0 1.5625rem;
	background: rgba(38,38,38,0);
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2), 
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	margin-bottom: 2.5vh;
}
.left .lc{
	border-radius:0 1.5625rem 0.125rem 0;
	display: inline-block;
	width: 4vw;
	height: 3.125rem;
}
.lc#lc1{
	background: #262626;
}
#al1:hover>#l>#lc1{width: 10vw;}
.lc#lc2{
	background: #4d0500;
}
#lc2{width: 12vw;}
#al2:hover>#l>#lc2{width: 10vw;}
.lc#lc3{
	background: #1d1e5c;
}
#al3:hover>#l>#lc3{width: 10vw;}
.lc#lc4{
	background: #003000;
}
#al4:hover>#l>#lc4{width: 10vw;}
.lc#lc5{
	background: #002a45;
}
#al5:hover>#l>#lc5{width: 10vw;}
.lc#lc6{
	background: #3d0c4f;
}
#al6:hover>#l>#lc6{width: 10vw;}
.left p{
	position: fixed;
	color: #f2f2f2;
	margin: -5.5vh 0 0 5vw;
	font-size: 1.1vw;
	vertical-align:middle;
	line-height: 5vh;
	height: 5vh;
}
.top a:hover{
	color: #2fc7cc;
}
li{font-size: 0.95vw;margin-bottom: 1.2vw;color: #262626;clear: both;}
li a{font-size: 0.95vw;line-height: 3vh;height: 3vh;width: 22vw;margin-bottom: 1vh;color: inherit;}
li:hover{color:#2fc7cc ;background-color: #262626;}
li:hover svg{fill: #F2F2F2;}
.uiquan1 ul{margin: 1.6vh 0 0 0;width: 35%;}
.uiquan1 ul li{color: #F2F2F2;float: left;}
.uiquan1 ul li:hover{color:#2fc7cc ;background-color: #262626;}
.uiquan2 ul{margin: 3% 0 0 45%;width: 60%;}
.uiquan2 ul li{color: #F2F2F2;float: right;}
.uiquan2 ul li:hover{color:#2fc7cc ;background-color: #262626;}
ul{padding: 0;list-style: none;z-index: 99;}
svg{margin: 0 1vw 0 0.4vw;}
.uiquan{padding: 1vw;}
.uiquan ul li{color: #262626;float: left;margin-right: 1.02vw;}
.uiquan ul li:hover{color:#2fc7cc ;background-color: #262626;}